<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>js练习</title>
	</head>
	<body>
		<p>最大的数值是：</p>
		<p id="deo"></p>
		<p id="id1"></p>
		<span>谢应鹏</span>
		<p>你好世界!</p>
		<div id="main">
		<p> DOM 是非常有用的。</p>
		<p>该实例展示了  <b>getElementsByTagName</b> 方法</p>
		</div>
		
		<p>通过类名查找内容</p>
		<p class="cls">xie谢</p>
		<h1 id="h">新标题</h1>
		<h2 onclick="this.innerHTML='hhhhhh' ">点击文本</h2>
		<button type="button" onclick="bh()">点我</button>
		<img src="../images/con2.jpg" id="im1"/>
		输入你的名字:<input type="text"  id="na" onchange="onch()" />
		<div id="mo" style="background-color: red;width: 200px;height: 200px;" onmousedown="modown(this)">
			把鼠标放上来
		</div>
		<p>添加监听事件</p>
		<p id="nh">点我</p>
		<p id="nh1"></p>
		<script type="text/javascript">
		/* 	
			向同一个元素中添加多个事件句柄
			addEventListener() 方法允许向同一个元素添加多个事件，且不会覆盖已存在的事件：
		 
		 */
		var x = document.getElementById("nh");
		x.addEventListener("click",clik);
		x.addEventListener("mouseover",over);
		x.addEventListener("mousedown",down)
		document.getElementById("nh").addEventListener("click",function(){
			alert("HelloWorld");
		});
		document.getElementById("nh").addEventListener("click",j);
		function j(){
			alert("HelloWorld");
		}
		function down(){
			document.getElementById("nh1").innerHTML = "鼠标离开";
		}
		function over(){
			document.getElementById("nh1").innerHTML = "鼠标放下";
		}
		function clik(){
			document.getElementById("nh1").innerHTML = "鼠标点击";
		}
		function s(){
			alert("Hxieyingpeng");
		}
		function mover(obj){
			obj.innerHTML = "我发上了变化";
		}
		function moOut(obj){
			obj.innerHTML ="我第二次发生变化";
		}
		function modown(obj){
			obj.style.backgroundColor = "blue";
		}
		function onch(){
			var x = document.getElementById("na");
			x.value = x.value.toUpperCase();
		}
		/* 
			avaScript 函数有个内置的对象 arguments 对象。

			argument 对象包含了函数调用的参数数组。

			通过这种方式你可以很方便的找到最大的一个参数的值：
 */
		
			function findMax(){
				var max = arguments[0];
				
				if(arguments.length < 2){
					return max;
				}
				for(var i = 0 ; i < arguments.length; i++){
					if(arguments[i] > max){
						max = arguments[i];
					}
				}
				return max ;
			}
			x = findMax(50,42,24,2,34,24,2,4200);
			document.getElementById('deo').innerHTML = x;
			function myfunction(){
				return this;
			}
			document.getElementById('id1').innerHTML = myfunction();
			var ob = {
				name:'xieyingpeng',
				age:21,
				school:'楚雄师范学院',
				hello:function(){
					console.log(this.name+","+this.school);
				}
			};
			ob.hello();
			console.log(document.getElementsByTagName("span").innerHTML);
			var x=document.getElementById("main");
			
			var y=x.getElementsByTagName("p");
			document.write('id="main"元素中的第一个段落为：' + y[0].innerHTML);
			var y1 = document.getElementsByClassName('cls');
			document.write(y1[0].innerHTML);
			/* 
				改变 HTML 属性
				如需改变 HTML 元素的属性，请使用这个语法：
				
				document.getElementById(id).attribute=新属性值
			 */
			document.getElementById("im1").src="../images/con1.jpg";
			
			document.getElementById('h').style.fontSize = '18px';
			document.getElementById('h').style.color = "blue";
			function bh(){
					document.getElementById('h').style.color = "red";
			}
		</script>
	</body>
</html>
